import { useState, useEffect, useRef } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { useRequest } from 'umi';
import {
  Button,
  Descriptions,
  Result,
  Avatar,
  Space,
  Statistic,
  Modal,
  Form,
  Input,
  Select,
  message,
  Breadcrumb,
} from 'antd';
import ProTable from '@ant-design/pro-table';
import {
  MinusCircleOutlined,
  PlusOutlined,
  EditOutlined,
  CloseCircleOutlined,
  UserOutlined,
  BarChartOutlined,
  StockOutlined,
} from '@ant-design/icons';

import dataList from './component/data.json';
import {
  ModalForm,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { ActionType } from '@ant-design/pro-table';

const { Option } = Select;

const DirectionManagement = () => {
  const [rowData, setRowData] = useState({});
  const [editVisible, setEditVisible] = useState(false);
  const [addVisible, setAddVisible] = useState(false);

  const [form] = Form.useForm();

  const ref = useRef<ActionType>();

  //获取所有方向
  const findAllDirection = useRequest(
    (data = null) => {
      return {
        url: 'http://10.1.40.84:9993/direction/findAllDirection',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );
  const findAllPeople = useRequest(
    (
      data = {
        groupType: '0',
        groupId: '',
      },
    ) => {
      return {
        url: 'http://10.1.40.84:9993/common/getGroupNumber',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );
  //插入方向
  const insertDirection = useRequest(
    (data = null) => {
      return {
        url: 'http://10.1.40.84:9993/direction/insertDirection',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
      onSuccess: (result, params) => {
        findAllDirection.run();
      },
    },
  );

  //更改方向
  const updateDirection = useRequest(
    (data = null) => {
      return {
        url: 'http://10.1.40.84:9993/direction/updateDirection',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
      onSuccess: (result, params) => {
        findAllDirection.run();
      },
    },
  );

  useEffect(() => {
    findAllDirection.run();
  }, []);

  //修改后
  const columnsChanged: any = [
    {
      title: '研究方向',
      align: 'center',
      dataIndex: 'directionName',
      key: 'directionName',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      title: '方向负责人',
      align: 'center',
      dataIndex: 'directionControllers',
      key: 'directionControllers',
      hideInSearch: true,
      valueType: 'select',
      request: async () => {
        const personInfo = JSON.parse(
          localStorage.getItem('personInfo') || '{}',
        );
        return (
          personInfo.ROLE_管理员?.data ||
          personInfo.ROLE_方向负责人?.data ||
          personInfo.ROLE_子方向负责人?.data
        );
      },
    },
    {
      title: '研究内容',
      align: 'center',
      dataIndex: 'directionContent',
      key: 'directionContent',
      copyable: true,
      hideInSearch: true,
    },
    {
      title: '可向社会提供的服务特色',
      align: 'center',
      dataIndex: 'directionFeature',
      key: 'directionFeature',
      copyable: true,
      hideInSearch: true,
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      align: 'center',
      render: (text: any, record: any, _: any, action: any) => [
        <ModalForm
          title={
            <>
              <EditOutlined />
              {' 编辑方向'}
            </>
          }
          trigger={<a key="1">编辑</a>}
          request={async () => {
            findAllPeople.run({
              groupType: '0',
              groupId: record.id,
            });
            return record;
          }}
          modalProps={{
            destroyOnClose: true,
          }}
          onFinish={async (param) => {
            console.log(param);
            let directionControllersTemp: any = [];
            param?.directionControllers?.map((item: any) => {
              directionControllersTemp.push(item.value);
            });
            updateDirection.run({
              ...param,
              directionControllers: directionControllersTemp,
            });
            return true;
          }}
        >
          <ProFormText name={'id'} hidden />
          <ProFormText
            name={'directionName'}
            label={'研究方向'}
            rules={[{ required: true, message: '请输入研究方向' }]}
          />
          <ProFormTextArea name={'directionContent'} label={'研究内容'} />
          <ProFormTextArea
            name={'directionFeature'}
            label={'可向社会提供的服务特色'}
          />
          <ProFormSelect.SearchSelect
            name="directionControllers"
            label="方向负责人"
            mode="multiple"
            options={findAllPeople?.data}
            colProps={{ span: 6 }}
          />
        </ModalForm>,
      ],
    },
  ];

  return (
    <PageContainer
      header={{
        title: ' ',
        breadcrumb: (
          <Breadcrumb>
            <Breadcrumb.Item>系统管理</Breadcrumb.Item>
            <Breadcrumb.Item>研究方向管理</Breadcrumb.Item>
          </Breadcrumb>
        ),
      }}
    >
      <ProTable
        search={false}
        style={{ marginTop: 16 }}
        // headerTitle={''}
        dataSource={findAllDirection.data || []}
        loading={findAllDirection.loading}
        columns={columnsChanged}
        request={async () => {
          var tableData: any = [];
          await findAllDirection.run().then((data) => {
            tableData = data || tableData;
          });
          return {
            data: tableData,
            success: true,
          };
        }}
        rowKey="directionName"
        toolBarRender={() => [
          <ModalForm
            title={
              <>
                <PlusOutlined />
                {' 添加方向'}
              </>
            }
            trigger={
              <Button type="primary" icon={<PlusOutlined />}>
                添加方向
              </Button>
            }
            onFinish={async (param) => {
              insertDirection.run(param);
              return true;
            }}
          >
            <ProFormText
              name={'directionName'}
              label={'研究方向'}
              rules={[{ required: true, message: '请输入研究方向' }]}
            />
            <ProFormTextArea name={'directionContent'} label={'研究内容'} />
            <ProFormTextArea
              name={'directionFeature'}
              label={'	可向社会提供的服务特色'}
            />
          </ModalForm>,
        ]}
      />
    </PageContainer>
  );
};
export default DirectionManagement;
